<template>
    <div class="person">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script setup lang="ts" name="Person">//作用：配组合式API
    import { reactive,toRefs } from 'vue';//  !!!
    //data
    let person = reactive({
        name:"zhangsan",
        age:18
    })
    let {name,age} = toRefs(person)//!!!
    //function
    function changeName(){
        name.value += "~"
    }
    function changeAge(){
        age.value += 1
    }
</script>

<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>